import { useState } from 'react'
import './index.scss'
import { interfacesUser } from '../../interfaces/user'
import { getStorage, storageKey } from '../../utils/storage'
import { message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { setToken } from '../../utils/token'

function Register() {
  const navigate = useNavigate()

  const defaultFormData = {
    email: '',
    verification_code: '',
    invite_code: '',
    phone_number: '',
    full_name: '',
    detail_address: '',
  }
  const [formData, setFormData] = useState(defaultFormData)

  const emailOnChange = (e) => {
    const { value } = e.target;
    setFormData({
      ...formData,
      email: value
    })
  }

  const verificationCodeOnChange = (e) => {
    const { value } = e.target;
    setFormData({
      ...formData,
      verification_code: value
    })
  }

  const inviteCodeOnChange = (e) => {
    const { value } = e.target;
    setFormData({
      ...formData,
      invite_code: value
    })
  }

  const addressOnChange = (e) => {
    const { value } = e.target;
    setFormData({
      ...formData,
      detail_address: value
    })
  }

  const nameOnChange = (e) => {
    const { value } = e.target;
    setFormData({
      ...formData,
      full_name: value
    })
  }

  const phoneOnChange = (e) => {
    const { value } = e.target;
    setFormData({
      ...formData,
      phone_number: value
    })
  }

  // 发送验证码
  const sendVerificationCode = () => {
    if (!formData.email) {
      message.info('email is require');
      return;
    }
    const params = {
      pubkey: getStorage(storageKey.publicKey),
      email: formData.email
    }
    interfacesUser.getVerificationCode(params).then(res => {
      if (res.code === 0) {
        message.info('The verification code has been sent')
      }
    })
  }

  // 校验
  const validation = () => {
    if (!formData.email) {
      message.info('email is require');
      return false;
    } else if (!formData.verification_code) {
      message.info('verification is require');
      return false;
    }
    return true;
  }

  // 保存
  const save = ()=> {
    console.log(formData);
    if (!validation()) return;
    const params = {
      pubkey: getStorage(storageKey.publicKey),
      email: formData.email,
      verification_code: formData.verification_code,
      invite_code: formData.invite_code,
      shipping_info: {
        phone_number: formData.phone_number,
        full_name: formData.full_name,
        detail_address: formData.detail_address,
      }
    }
    interfacesUser.register(params).then(res => {
      if (res.code === 0) {
        const { token } = res.data;
        setToken(token);
        navigate('/');
        window.scrollTo(0, 0);
      }
    })
  }

  return (
    <div className='register'>
      <div className='title'>We still need to complete the  registration<br/>one step away</div>
      <div className='content'>
        <div className='tip'>
          Email address is required so that the project team can synchronize<br/>
          project information with you at any time.
        </div>
        <div className='form'>
          <div className='form-item'>
            <div className='require'>*</div>
            <div className='label'>Personal email address</div>
            <div className='value'>
              <input className='input' placeholder='Please enter' onChange={emailOnChange} />
            </div>
          </div>
          <div className='form-item'>
            <div className='require'>*</div>
            <div className='label'>Email verification code</div>
            <div className='value'>
              <input className='input' placeholder='Please enter' onChange={verificationCodeOnChange} />
              <div className='btn' onClick={sendVerificationCode}>Send verification<br/>code</div>
            </div>
          </div>
          <div className='form-item'>
            <div className='require'>*</div>
            <div className='label'>Invitation code</div>
            <div className='value'>
              <input className='input' placeholder='Please enter' onChange={inviteCodeOnChange} />
            </div>
          </div>
        </div>
        <img className='divider' alt='divider' src={require('../../assets/divider.png')} />
        <div className='tip'>
          The products and official gifts you purchase in the future will be sent<br/>
          to you through your shipping information, and you can also make<br/>
          modifications in the "Personal Center" in the future.
        </div>
        <div className='form'>
          <div className='form-item'>
            <div className='label'>Delivery address</div>
            <div className='value'>
              <input className='input' placeholder='Please enter(optional)' onChange={addressOnChange} />
            </div>
          </div>
          <div className='form-item'>
            <div className='label'>Name of consignee</div>
            <div className='value'>
              <input className='input' placeholder='Please enter(optional)' onChange={nameOnChange} />
            </div>
          </div>
          <div className='form-item'>
            <div className='label'>Phone number</div>
            <div className='value'>
              <input className='input' placeholder='Please enter(optional)' onChange={phoneOnChange} />
            </div>
          </div>
        </div>
        <div className='save' onClick={save}>Save</div>
      </div>
      <div className='bottom-box'></div>
    </div>
  )
}

export default Register